function showPage(response, $container){
      // 更新分页信息
      $container.find('#current-page-display').text(response.pagination.current_page);
      $container.find('#total-pages-display').text(response.pagination.total_pages);
      $container.find('#total-pages').text(response.pagination.total_pages);
      $container.find('#total-items').text(response.pagination.total_items);

      // 更新按钮状态
      $container.find('[data-action="prev"]')
          .prop('disabled', !response.pagination.has_prev)
          .toggleClass('disabled', !response.pagination.has_prev);
      $container.find('[data-action="next"]')
          .prop('disabled', !response.pagination.has_next)
          .toggleClass('disabled', !response.pagination.has_next);

      // 更新输入框范围
      $container.find('#page-jump-input')
          .attr('max', response.pagination.total_pages)
          .val('');

}

// 显示加载状态
function loadPages(page, keyword, userSelect, $container, url, tableLabel) {
        const loadingToast = `<div class="toast align-items-center text-white bg-primary border-0 position-fixed bottom-0 end-0 m-3" role="status">
            <div class="d-flex">
                <div class="toast-body">正在加载第 ${page} 页数据...</div>
                <div class="spinner-border spinner-border-sm text-light me-2 m-auto"></div>
            </div>
        </div>`;

      $container.append(loadingToast);
      $container.find('.toast').toast('show');

        // AJAX请求数据 window.location.pathname
        const API_BASE = window.location.origin;
        // headers['X-Requested-With'] = 'XMLHttpRequest'
        $.ajax({
            url: url,
            type: 'GET',
            data:{
                is_ajax: '1',
                page: page,
                keyword,
                userSelect,
            },
            headers: { "X-Requested-With": 'XMLHttpRequest' },
            success: function(response) {
                // 分页后,更新最新的数据
                ownUser_permissions = response.context.ownUser_permissions
                users = response.context.users
                groups = response.context.groups

              // 更新表格内容
              $container.find(tableLabel).html(response.table_html);

              // 更新分页信息
              $container.find('#current-page-display').text(response.pagination.current_page);
              $container.find('#total-pages-display').text(response.pagination.total_pages);
              $container.find('#total-pages').text(response.pagination.total_pages);
              $container.find('#total-items').text(response.pagination.total_items);

              // 更新按钮状态
              $container.find('[data-action="prev"]')
                  .prop('disabled', !response.pagination.has_prev)
                  .toggleClass('disabled', !response.pagination.has_prev);
              $container.find('[data-action="next"]')
                  .prop('disabled', !response.pagination.has_next)
                  .toggleClass('disabled', !response.pagination.has_next);

              // 更新输入框范围
              $container.find('#page-jump-input')
                  .attr('max', response.pagination.total_pages)
                  .val('');

               // 更新内外部用户选择框 和 搜索原来的关键字
               try {
                   $container.find('#userTypeSelect').val(userSelect)
                   $container.find('#userSearch').val(keyword)
               }catch {}


                // 显示成功提示
                const successToast = `<div class="toast align-items-center text-white bg-success border-0 position-fixed bottom-0 end-0 m-3" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">已加载第 ${page} 页数据</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>`;

              $container.append(successToast);
              $container.find('.toast').toast('show');
              setTimeout(() => $('.toast').toast('hide').remove(), 2000);},
            error: function(xhr) {
                console.error("分页加载错误:", xhr.statusText);
                const errorToast = `<div class="toast align-items-center text-white bg-danger border-0 position-fixed bottom-0 end-0 m-3" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">数据加载失败，请重试</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>`;

              $container.append(errorToast);
              $container.find('.toast').toast('show');
              setTimeout(() => $('.toast').toast('hide').remove(), 3000); },
            complete: function() {
                // 移除加载提示
                $container.find('.toast').toast('hide').remove();
            }
        });
    }

// 分页
function paging(e, container, url, tableLabel){
    const $container = $(container);
    // 获取容器作用域内的按钮
    const $btn = $container.find(e.target.closest('.pagination-btn'));
    // 使用上下文参数限定作用域
    const action = $btn.data('action');
    // 容器内获取分页数据
    const currentPage = parseInt($container.find('#current-page-display').text());
    const totalPages = parseInt($container.find('#total-pages-display').text());
    const keyw = container.querySelector('#userSearch')
    const keyword = keyw ? keyw.value.trim() : ''
    const userEl = container.querySelector('#userTypeSelect')
    const userSelect = userEl ? userEl.value.trim() : 'internal';

    let newPage = currentPage;
    if (action === 'prev' && currentPage > 1) newPage = currentPage - 1;
    if (action === 'next' && currentPage < totalPages) newPage = currentPage + 1;
    if (newPage !== currentPage) {
        // loadPage(newPage, keyword, userSelect, $container);
        loadPages(newPage, keyword, userSelect, $container, url, tableLabel)
    }
}

// 分页里的跳转按钮
function pagingJump(container, url, tableLabel){
    const $container = $(container);
    // 获取容器作用域内的按钮
    // const $btn = $container.find(e.target.closest('#page-jump-btn'));
    const targetPage = parseInt($container.find('#page-jump-input').val());
    const totalPages = parseInt($container.find('#total-pages-display').text());

    const keyw = container.querySelector('#userSearch')
    const keyword = keyw ? keyw.value.trim() : ''
    const userEl = container.querySelector('#userTypeSelect')
    const userSelect = userEl ? userEl.value.trim() : 'internal';

    if (targetPage && targetPage >= 1 && targetPage <= totalPages) {
        // loadPage(targetPage, keyword, userSelect, $container);
        loadPages(targetPage, keyword, userSelect, $container, url, tableLabel)
    } else {
        // 输入验证提示
        const toast = `<div class="toast align-items-center text-white bg-danger border-0 position-fixed bottom-0 end-0 m-3" role="alert">
            <div class="d-flex">
                <div class="toast-body">请输入 1-${totalPages} 之间的有效页码</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>`;

       $container.append(toast);
       $container.find('.toast').toast('show');
        setTimeout(() => $('.toast').toast('hide').remove(), 3000);
    }
}